<template>
<div class="recharge">
  <div class="cardInfo">
    <div class="cardImg">
      <img class="bcg" :src="info.imageOne" alt="">
      <img class="backgroundImg" src="../../assets/image/logo2.png" alt="">
    </div>
    <div class="info">
      <p> {{info.cardName}}-充值卡</p>
      <p>￥{{info.initMoney || 0 |currency}}</p>
    </div>
  </div>
  <div class="flag"></div>
  <div class="money top">
    <span>余额增加</span>
    <span>￥{{info.initMoney||0|currency}}</span>
  </div>
  <div class="money">
    <span>有效期延长</span>
    <span>{{info.validDay}}天</span>
  </div>
  <div class="pay_type">
    支付方式
  </div>
  <div :class="{payType: true, choose: selected}" @click="select">
    <i class="wechat-icon"></i>
    <span>微信支付</span>
    <i class="selected"></i>
  </div>
  <div class="buy" v-btn :class="{ok: selected, sure: true}" @click="recharge">立即支付</div>
</div>
</template>

<script>
export default {
  data() {
    return {
      selected: true,
      info: ""
    };
  },
  mounted() {
    var self = this;
    self._ajax({
      url: self.fn.wyl + "card/cardDetail",
      method: "post",
      data: {
        id: self.$route.query.id
      },
      callback(db) {
        if (db.errorCode == 200) {
          self.info = db.datas.cardType;
        } else {
          self.fn.tip(db.msg);
        }
      }
    });
  },
  methods: {
    select() {
      this.selected = !this.selected;
    },
    recharge() {
      var self = this;
      if (!self.selected) {
        return this.fn.tip("请选择支付方式")
      };
      //console.log('可以支付了')
      self._ajax({
        url: self.fn.xqq + 'pay/wapPay',
        data: {
          orderNo: "",
          payType: "5", // 会员卡充值
          cardId: self.$route.query.id,
          callBackUrl: location.origin + location.pathname + "#/memberCardDetail/" + self.$route.query.id,
          cancelUrl: location.origin + location.pathname + '#/UserCenter',
          amountTotal: this.info.initMoney,
        },
        method: 'post',
        callback(db) {
          if (db.errorCode == 200) {
            location.href = db.datas.payUrl;
          } else {
            self.fn.tip(db.msg);
          }
        }
      })
    }
  }
};
</script>
<style scoped lang="scss">
@import "~@/assets/css/util";
.recharge {
  padding: 0 0.75rem;
  height: 100vh;
  background-color: #fff;
  .flag {
    height: px2rem(30);
    background-color: #f2f2f2;
    margin: 0 -0.75rem;
  }
  .cardInfo {
    padding: 0.75rem 0;
    display: flex;
    .cardImg {
      img {
        vertical-align: middle;
      }
      position: relative;
      .bcg {
        @include wh(230, 120);
      }
      .backgroundImg {
        position: absolute;
        top: 50%;
        left: 50%;
        margin-top: px2rem(-12);
        margin-left: px2rem(-57);
        @include wh(114, 24);
      }
    }
    .info {
      >p {
        padding-left: px2rem(24);
        height: px2rem(60);
        display: flex;
        align-items: center;
      }
      >p:nth-child(2) {
        color: #999999;
      }
    }
  }
  >.money {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: px2rem(120);
    span:nth-child(2) {
      color: #08bae3;
    }
    &.top {
      border-bottom: 1px solid #e6e6e6;
      padding-right: px2rem(30);
      margin-right: px2rem(-30);
    }
  }
  .pay_type {
    height: px2rem(60);
    display: flex;
    align-items: center;
    background-color: #f2f2f2;
    margin: 0 -0.75rem;
    padding-left: 0.75rem;
    color:#666;
    font-size:0.6rem;
  }
  .payType {
    text-align: left;
    background: #fff;
    line-height: 3rem;
    border-bottom: 1px solid #e6e6e6;
    padding-right: 0.75rem;
    margin-right: -0.75rem;
    &.choose {
      .selected {
        background: url(../../assets/image/icon/userCenter/dui.png) no-repeat center;
        background-size: 100%;
        border: none;
      }
    }
    .wechat-icon {
      display: inline-block;
      width: 0.8rem;
      height: 0.8rem;
      background: url(../../assets/image/icon/userCenter/wechat-icon.png) no-repeat center;
      background-size: contain;
      vertical-align: middle;
      margin-right: 0.5rem;
    }
    .selected {
      width: 1rem;
      height: 1rem;
      display: inline-block;
      border: 0.05rem solid #e6e6e6;
      border-radius: 50%;
      float: right;
      margin-top: 1.2rem;
    }
  }
  .buy {
    position: fixed;
    bottom: 2rem;
    left: 7.5%;
    width: 85%;
    height: px2rem(88);
    @include flex_center();
    color: #fff;
    border-radius: px2rem(44);
    background-color: #ccc;
  }
  .ok {
    background-color: #08bae3;
  }
}
</style>
